<template>
  <div class="main" :style="style">
    <Header></Header>
    <!-- <el-button type="primary" @click="go">提转到侧边栏布局页面</el-button> -->
    <div class="second">
      <div class="item" v-for="i in data" :key="i.value" @click="go(i)">
        <div style="font-size: 50px">
          <i :class="i.icon"></i>
        </div>

        <div style="margin-top: 20px">{{ i.label }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/layout/components/Header";
export default {
  name: "ModuleSelect",
  props: {},
  components: {
    Header,
  },
  computed: {
    style() {
      return {
        backgroundImage: `url(${this.bgStyle})`,
        backgroundSize: "cover", // 背景图片大小自适应
        backgroundPosition: "center", // 背景图片居中显示
      };
    },
  },
  data() {
    return {
      bgStyle: require("@/assets/backgd.png"),
      data: [
        {
          label: "批次合同",
          value: "1",
          icon: "el-icon-folder-opened",
        },
        {
          label: "框架合同",
          value: "2",
          icon: "el-icon-s-tools",
        },
        {
          label: "供货单",
          value: "3",
          icon: "el-icon-success",
        },
        {
          label: "辅助决策",
          value: "4",
          icon: "el-icon-s-data",
        },
      ],
    };
  },
  methods: {
    go(e) {
      localStorage.setItem("module", e.value);
      localStorage.setItem("moduleText", e.label);
      if (e.value == "1") {
        this.$router.push(`/constract`);
      }
      if (e.value == "2") {
        this.$router.push(`/frame`);
      }
      if (e.value == "3") {
        this.$router.push(`/home`);
      }
      if (e.value == "4") {
        this.$router.push(`/auxiliary`);
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .second {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 120px;
    align-items: center;
    .item {
      width: 200px;
      height: 200px;
      background-color: #249087;
      border-radius: 16px;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      cursor: pointer;

      flex-direction: column;
    }
    .item:active {
      // background-color: #3e8e41; /* 改变背景颜色 */
      transform: scale(0.95); /* 缩放效果，使元素看起来被按下去 */
    }
  }
}
</style>
